<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>订单管理</cite></a>
    <a><cite>发行订单</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" id="filterForm" lay-filter="form_order_search">
        <script type="text/html" template lay-done="layui.data.done()">
          <div class="layui-row">
            <div class="layui-inline">
              <div class="layui-form-label">关键字搜索</div>
              <div class="layui-input-inline" style="width: 200px">
                <input type="text" name="keyword" value="{{decodeURIComponent(layui.router().search.keyword || '')}}"
                       class="layui-input"
                       placeholder="产品名称/订单号/用户手机号">
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-form-label">订单状态</div>
              <div class="layui-input-inline" style="width: 100px">
                <select name="order_status">
                  <option value="">全部</option>
                  <option value="paid">已付款</option>
                  <option value="not_pay">未付款</option>
                  <option value="cancel,auto_cancel">已取消</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-form-label">资产状态</div>
              <div class="layui-input-inline" style="width: 100px">
                <select name="trans_status">
                  <option value="">全部</option>
                  <option value="success">转账成功</option>
                  <option value="failed">转账失败</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-row" style="padding-top: 10px">
            <div class="layui-inline">
              <div class="layui-form-label">分账状态</div>
              <div class="layui-input-inline" style="width: 100px">
                <select name="divide_status">
                  <option value="">全部</option>
                  <option value="init">等待分账</option>
                  <option value="divided,dividing">分账成功</option>
                  <option value="failed">分账失败</option>
                  <option value="not_support">不支持分账</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-form-label">日期范围</div>
              <div class="layui-inline" id="date_range">
                <div class="layui-input-inline">
                  <input type="text" name="start_date" autocomplete="off" id="start_date" class="layui-input"
                         style="width: 100px" value="{{layui.router().search.start_date || ''}}" placeholder="开始日期">
                </div>
                <div class="layui-input-inline">~</div>
                <div class="layui-input-inline">
                  <input type="text" name="end_date" autocomplete="off" id="end_date" class="layui-input"
                         style="width: 100px" value="{{layui.router().search.end_date || ''}}" placeholder="结束日期">
                </div>
              </div>
            </div>
            <div class="layui-inline layui-btn-group">
              <button type="submit" lay-submit class="layui-btn" lay-filter="submit_order_search">
                <i class="layui-icon layui-icon-search"></i>查询
              </button>
              <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                      lay-filter="reset_order_search">
                <i class="layui-icon layui-icon-close"></i>重置
              </button>
            </div>

            <div class="layui-inline layui-btn-group">
              <button type="submit" lay-submit class="layui-btn layui-btn-info"
                      lay-filter="order_export">
                <i class="layui-icon layui-icon-export"></i>导出
              </button>
            </div>
          </div>
        </script>
      </form>
    </div>
    <div class="layuiadmin-card-text" style="width: 240px;height: 20px;margin-left: 15px;">
      <div class="layui-text-top">
        <strong>汇总金额: </strong><input type="text" name="amount" class="layui-input" readonly
                                          style="width: 150px;display: inline-block"><strong> 元</strong>
      </div>
    </div>
    <div class="layui-card-body">
      <div id="table_order"></div>
      <script type="text/html" id="tpl_buyer">
        {{d.user.mobile}}
      </script>
      <script type="text/html" id="tpl_status">
        {{# if (d.order_status.value === 'cancel' || d.order_status.value === 'auto_cancel') { }}
        <span class="layui-font-gray">{{d.order_status.description}}</span>
        {{# } }}
        {{# if (d.order_status.value === 'paid') { }}
        <span class="layui-font-green">{{d.order_status.description}}</span>
        {{# } }}
        {{# if (d.order_status.value === 'not_pay') { }}
        <span class="layui-font-red">{{d.order_status.description}}</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_divide_status">
        {{# if (d.payment && d.payment.pay_status.value === 'finished') { }}
        {{# if (d.payment.divide_status.value === 'init') { }}
        <span class="layui-font-gray">{{d.payment.divide_status.description}}</span>
        {{# } }}
        {{# if (d.payment.divide_status.value === 'not_support') { }}
        <span class="layui-font-gray">{{d.payment.divide_status.description}}</span>
        {{# } }}
        {{# if (d.payment.divide_status.value === 'divided') { }}
        <span class="layui-font-green">{{d.payment.divide_status.description}}</span>
        {{# } }}
        {{# if (d.payment.divide_status.value === 'failed') { }}
        <span class="layui-font-red">{{d.payment.divide_status.description}}</span>
        {{# } }}
        {{# } }}
      </script>
      <script type="text/html" id="tpl_trans_status">
        {{# if (d.trans_status) { }}
        {{# if (d.trans_status.value === 'success') { }}
        <span class="layui-font-green">{{d.trans_status.description}}</span>
        {{# } }}
        {{# if (d.trans_status.value === 'failed') { }}
        <span class="layui-font-red">{{d.trans_status.description}}</span>
        {{# } }}
        {{# } }}
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link" lay-href="/order/detail/id={{d.id}}">
          查看
        </a>
      </script>
    </div>
  </div>
</div>

<script>
  layui.data.done = function () {
    layui.use(['fox_table', 'admin', 'laydate'], function () {
      let $ = layui.$
        , fox_table = layui.fox_table
        , form = layui.form
        , admin = layui.admin
        , laydate = layui.laydate

      $('select[name="order_status"]').val(layui.router().search.order_status || '')
      $('select[name="trans_status"]').val(layui.router().search.trans_status || '')
      $('select[name="divide_status"]').val(layui.router().search.divide_status || '')
      //日期时间选择器
      laydate.render({
        elem: '#date_range'
        , range: ['#start_date', '#end_date']
        , max: (new Date()).toDateString()
      });
      form.render()

      let resourceUrl = 'agent-admin/orders'

      // 列表查询
      fox_table.render({
        id: 'table_order'
        , url: resourceUrl
        , cols: [[
          {title: 'ID', field: 'id', width: 80, align: "center", sort: true}
          , {title: '订单号', field: 'order_no', width: 180}
          , {title: '产品名称', field: 'product_name', minWidth: 100}
          , {title: '购买人', templet: '#tpl_buyer', width: 120}
          , {title: '金额', field: 'display_order_amount', width: 80}
          , {title: '下单时间', field: 'created_at', width: 180, align: "center"}
          , {title: '订单状态', templet: '#tpl_status', width: 100}
          , {title: '资产状态', templet: '#tpl_trans_status', width: 100}
          , {title: '分账状态', templet: '#tpl_divide_status', width: 100}
          , {title: '操作', width: 80, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
        ]]
      });

      admin.get('agent-admin/agent_amount?type=issue', function (res) {
        $('input[name="amount"]').val(res.data.amount)
        form.render();
      })

      form.on('submit(order_export)', function (data) {
        layer.load();
        admin.post('agent-admin/orders/export', data.field, function (res) {
          layer.confirm('数据下载中，请到下载中心查看下载任务进度.', function (index) {
            layer.close(index);
            location.hash = '/ops/download';
            return false;
          });
          layer.closeAll('loading');
        }, {hasLoading: true})
        return false;
      });


      //监听操作栏
      fox_table.toolbar(function (obj) {
        let data = obj.data;
      });

      //搜索
      form.on('submit(submit_order_search)', function (d) {
        fox_table.reload(d.field);
        admin.get('agent-admin/agent_amount?type=issue&keyword=' + d.field.keyword + '&order_status='
          + d.field.order_status + '&trans_status=' + d.field.trans_status + '&divide_status='
          + d.field.divide_status + '&start_date=' + d.field.start_date + '&end_date=' + d.field.end_date, function (res) {
          $('input[name="amount"]').val(res.data.amount)
          form.render();
        })
        return false;
      });
      //重置
      form.on('submit(reset_order_search)', function (d) {
        $("input[name='keyword']").val('');
        $("select[name='order_status']").val('');
        $("select[name='divide_status']").val('');
        $("select[name='trans_status']").val('');
        $("input[name='start_date']").val('');
        $("input[name='end_date']").val('');
        form.render()
        fox_table.reload({});
        admin.get('agent-admin/agent_amount?type=issue', function (res) {
          $('input[name="amount"]').val(res.data.amount)
          form.render();
        })
        return false;
      });
    })
  }
</script>

